<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <title>充电信息统计</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <style type="text/css">
    .el-aside {
      color: #333;
      padding: 10px;
    }
    .el-main {
      color: #333;
      text-align: center;
    }
    /* baidu map */
    /* body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} */
    #the_chart{width:100%;height:calc(100% - 45px);overflow: hidden;margin:0;font-family:"微软雅黑";}
    .box-card{
      height: 49%;
      position: relative;
    }
    .box-card-info{
      color: rgba(0, 0, 0, 0.45);
      position: absolute;
      top: 5px;
      left: 5px;
      font-size: 15px;
      cursor: pointer;
    }
    .el-table tr{
      cursor: pointer;
    }
  </style>  
  <!-- map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>  
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>

</head>
<body>
  <div id="app" v-cloak class="animated fadeInRight">
    <el-container>
      <el-aside width="400px" :style="{height:contentHeight+'px'}">
          <el-card class="box-card">
            <el-tooltip effect="dark" content="车辆列表" placement="top-start">
              <i class="el-icon-info box-card-info"></i>
            </el-tooltip>
            <el-row type="flex" align="middle">
                <el-col :span="15">
                    <el-input placeholder="请输入车牌号查询" size="small" v-model="vehicleParam.plateNo" clearable></el-input>
                </el-col>
                <el-col :span="4" :offset="1">
                  <el-button type="primary" size="mini" @click="searchVehicle">确定</el-button>
                </el-col>
              </el-row>
              <el-table :data="vehicleList.list" highlight-current-row style="width: 100%" size="small" :height="contentHeight/2 -120" @current-change="handleRowChangeVehicle">
                <el-table-column prop="plateNo" label="车牌号"></el-table-column>
                <el-table-column prop="vinCode" label="车架号"  width="150"></el-table-column>
                <el-table-column label="是否在线" width="100">
                    <template slot-scope="scope">
                        <span class="label-inuse" v-if="scope.row.online">在线</span>
                        <span class="label-outuse" v-else>不在线</span>
                    </template>
                </el-table-column>
              </el-table>
              <div style="height:10px"></div>
              <el-pagination
                background
                small
                layout="prev, pager, next"
                @current-change="handleCurrentChangeVehicle"
                :current-page.sync="vehicleParam.page"
                :page-size="vehicleParam.pageSize"
                :total="vehicleList.totalElement">
              </el-pagination>
          </el-card>
          <div style="height:1%"></div>
          <el-card class="box-card">
              <el-tooltip effect="dark" :content="'车架号：'+batteryChargeParam.vin" placement="top-start">
                <i class="el-icon-info box-card-info"></i>
              </el-tooltip>
              <el-row type="flex" align="middle">
                <el-col :span="19">
                  <el-date-picker
                    v-model="intervalTime"
                    type="datetimerange"
                    align="center"
                    size="small"
                    style="width:100%;font-size: 12px"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']">
                  </el-date-picker>
                </el-col>
                <el-col :span="4" :offset="1">
                  <el-button type="primary" size="mini" @click="searchBattery" :disabled="!batteryChargeList.totalCount">确定</el-button>
                </el-col>
              </el-row>
              <el-table :data="batteryChargeList.list" highlight-current-row style="width: 100%" size="small" :height="contentHeight/2 -120" @current-change="handleRowChangeBattery">
                <el-table-column prop="soc" label="soc" width="55">
                    <template slot-scope="scope">
                        <span style="color:#1ab394">{{scope.row.soc}}%</span>
                    </template>
                </el-table-column>
                <el-table-column prop="chargeStartTime" label="开始时间"></el-table-column>
                <el-table-column prop="chargeEndTime" label="结束时间"></el-table-column>
              </el-table>
              <div style="height:10px"></div>
              <el-pagination
                background
                small
                layout="prev, pager, next"
                @current-change="handleCurrentChangeBattery"
                :current-page.sync="batteryChargeParam.page"
                :page-size="batteryChargeParam.pageSize"
                :total="batteryChargeList.totalCount">
              </el-pagination>
          </el-card>
      </el-aside>
      <el-main>
          <div id="the_chart"></div> 
      </el-main>
    </el-container>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          appShow:false,
          contentHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 37,
          vehicleList:[],
          vehicleParam:{
            page:1,
            pageSize:15
          },
          batteryChargeList:[],
          batteryChargeParam:{
            page:1,
            pageSize:15
          },
          batteryChargeEChartsList:[],
          batteryChargeEChartsParam:{},
          theEchart:null,
          optionChart:null,
          intervalTime:null,//时间选择
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.posRequest()
          this.initChart()
        })
      },
      methods: {
          // init 图表
          initChart:function(){
            var _this = this;
            setTimeout(function(){
              _this.chart = document.getElementById("the_chart")
              if(_this.chart.offsetWidth){
                _this.theEchart = echarts.init(_this.chart);
                _this.optionChart = {
                    legend:{},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [{
                        type: 'slider',
                        show: true, //flase直接隐藏图形
                        xAxisIndex: [0],
                        left: '5%', //滚动条靠左侧的百分比
                        bottom: -5,
                        start: 0,//滚动条的起始位置
                        end: 10 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                    }],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {  
                          interval:0,  
                          // margin:15,
                          rotate:-20  
                        }, 
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'SOC',
                            type:'line',
                            smooth: true,
                            data:[]
                        },
                        {
                            name:'电流',
                            type:'line',
                            smooth: true,
                            data:[]
                        },
                        {
                            name:'电压',
                            type:'line',
                            smooth: true,
                            data:[]
                        } 
                    ]
                }
                _this.theEchart.setOption(_this.optionChart);
              }else{
                _this.initChart()
              }
            },100)            
          },
          // 车辆分页
          handleCurrentChangeVehicle:function(){
            this.posRequest()
          },
          // 充电记录分页
          handleCurrentChangeBattery:function(){
            this.postBatteryCharge()
          },
          // handle row 车辆列表
          handleRowChangeVehicle:function(row){
            if(row){
              this.batteryChargeParam.vin = row.vinCode
              this.batteryChargeParam.page = 1
              this.postBatteryCharge(true)
            }
          },
          // handle row 充电记录
          handleRowChangeBattery:function(row){
            if(row){
              this.batteryChargeEChartsParam = row
              this.postBatteryChargeECharts()
            }
          },
          // 检索 车辆
          searchVehicle:function(){
            this.vehicleParam.page = 1
            this.posRequest()
          },
          // 检索 充电记录
          searchBattery:function(){
            this.batteryChargeParam.startTime = this.intervalTime[0]
            this.batteryChargeParam.endTime = this.intervalTime[1]
            this.batteryChargeParam.page = 1
            this.postBatteryCharge()
          },
          // 请求车辆数据
          posRequest:function(){
            var _this = this;
            var data = { 
              "page":this.vehicleParam.page-1,
              "pageSize":this.vehicleParam.pageSize,
              "plateNo":this.vehicleParam.plateNo
            }
            resourceRequst("/vehicle/queryVehicleInfo",data,function(res){
                _this.vehicleList = res.getResult
            })
          },
          // 请求充电信息数据
          postBatteryCharge:function(){
            var _this = this;
            var data = { 
              vin:this.batteryChargeParam.vin,
              page:this.batteryChargeParam.page,
              pageSize:this.batteryChargeParam.pageSize,
              startTime:this.batteryChargeParam.startTime,
              endTime:this.batteryChargeParam.endTime
            }
            resourceRequst("/battery/queryBatteryChargeListByPage",data,function(res){
              if(res.totalCount == 0) {
                _this.$message.error("没有充电记录！")
                _this.batteryChargeList = []
                return
              }
              _this.batteryChargeList = res
            })
          },
          // 请求充电信息ECharts数据
          postBatteryChargeECharts:function(){
            var _this = this;
            var data = { 
              vin:this.batteryChargeEChartsParam.vin,
              startTime:this.batteryChargeEChartsParam.chargeStartTime,
              endTime:this.batteryChargeEChartsParam.chargeEndTime
            }
            resourceRequst("/battery/queryBatteryChargeDetailInfo",data,function(res){
              if(!res.list.length){
                _this.$message.error("没有电池充电电压电流变化信息！")
                return
              }
              _this.batteryChargeEChartsList = res.list
            })
          },
      },
      watch:{
        batteryChargeEChartsList:function(val){
          var soc = [];
          var totalCurrent = [];
          var totalVoltage = [];
          var dateTime = [];
          _.each(val,function(ele,index){
            soc.push(parseInt(ele.soc))
            totalCurrent.push(parseInt(ele.totalCurrent))
            totalVoltage.push(parseInt(ele.totalVoltage))
            // soc.push(parseInt(ele.soc) +  Math.random()*100)
            // totalCurrent.push(parseInt(ele.totalCurrent) + Math.random()*1000)
            // totalVoltage.push(parseInt(ele.totalVoltage) + Math.random()*1000)
            dateTime.push((ele.uploadTime).split(" ")[1])
          })

          this.optionChart.series[0].data = soc;
          this.optionChart.series[1].data = totalCurrent;
          this.optionChart.series[2].data = totalVoltage;
          this.optionChart.xAxis.data = dateTime
          this.theEchart.setOption(this.optionChart);
        }
      }
    })
    window.onresize = function () {//重置容器高宽
        if(vm && vm.theEchart){
          vm.theEchart.resize();
        }
    };
  </script>
</html>